<!-- <link href="" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" ></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=rY3GiMvIuXfscmjwGKMVZ0Czu5yLGCuk"></script> -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=rY3GiMvIuXfscmjwGKMVZ0Czu5yLGCuk"></script>

<div id="app">
<div style="text-align: center;margin: 10px;">地图</div>
<div id="container" style="width: 100%;height: 600px;"></div>

<button type="button" class="btn btn-primary" v-on:click="initMap">初始地图</button>
<button type="button" class="btn btn-primary" v-on:click="cleanMap">清空地图</button>
<button type="button" class="btn btn-primary" v-on:click="printingMap">后台打印</button>
<button type="button" class="btn btn-primary" v-bind:class="{tertiary:clickPrinting,primary:!clickPrinting}" v-on:click="clickPrinting=!clickPrinting;" >点击围栏打印坐标</button>
<button type="button" class="btn btn-primary" v-on:click="boundary">打印行政区域</button>

</div>
<script>
let _self;

new Vue({
    el: '#app',
    data: {
    	map: {},
        polyline: [],
        clickPrinting: false,//是否开户点击围栏打印坐标数据.
    },
    methods: {
    	//初始地图
        initMap: function() {
            // 百度地图API功能
            //enableMapClick:false:构造底图时，关闭底图可点功能
            let map = new BMap.Map("container", {enableMapClick:false});
            let point = new BMap.Point(121.480342,31.23587);
            map.centerAndZoom(point, 12);
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            //通过方法方式设置地图允许的最大最小级别
            map.setMinZoom(1);
            map.setMaxZoom(21);
            
            _self.polyline=[];
            map.addEventListener("click",function(e){
                if(_self.clickPrinting){return;};//正在打印编辑围栏
                
                _self.resetMap(e.point);
            });
            
            _self.map=map;
            
            _self.polylineMap();//初始化围栏
            
            //_self.boundary();// 获取行政区域围栏
        },
        //清空地图
        cleanMap: function() {
            _self.polyline=[];
            _self.map.clearOverlays();
        },
        //后台打印,打印正在绘制的围栏坐标数据.
        printingMap: function() {
            let poly = [];
            for (let i = 0; i < _self.polyline.length; i++) {
                poly.push({lat:_self.polyline[i].lan,lng:_self.polyline[i].lng});
            }
            console.log(JSON.stringify(poly));
        },
        //重置地图
        resetMap:function(point){
            _self.map.clearOverlays();//清空地图
            
            _self.polyline.push(point);
            let polygon = new BMap.Polygon(_self.polyline, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
            _self.map.addOverlay(polygon);   //增加多边形
        },
        //原有围栏
        polylineMap:function(){
            axios.get('../../map/310107000000.json').then(function (response) {
                let data = response.data;
                // 打印行政区域,并禁止清除
                let quLine = [];
                for (let i = 0; i < data.boundaries.length; i++)
                {
                	quLine.push(new BMap.Point(data.boundaries[i].lng, data.boundaries[i].lan));
                }
                let quPolygon = new BMap.Polygon(quLine, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
                //quPolygon.enableEditing();//开启编辑功能
                //quPolygon.disableEditing();//关闭编辑功能
                quPolygon.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
                _self.map.addOverlay(quPolygon);   //增加多边形
                
                // 分别打印街道围栏
                let childs = data.childs;
                for (let i = 0; i < childs.length; i++) {
                    let child = childs[i];  
                    let boundaries=child.boundaries;
                    let polyline = [];
                    if (boundaries!=null&&boundaries.length>0) {
                        for (let x = 0; x < boundaries.length; x++) {
                            polyline.push(new BMap.Point(boundaries[x].lng, boundaries[x].lan));
                        }
                        let polygon = new BMap.Polygon(polyline, {strokeColor: child.color, strokeWeight: 0.1, strokeOpacity: 0.5, fillOpacity: 0.3, fillColor: child.color});  //创建多边形
                        //polygon.enableEditing();//开启编辑功能
                        //polygon.disableEditing();//关闭编辑功能
                        polygon.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
                        //点击获取转坐标集合,用于开户编辑.
                        polygon.addEventListener("click",function(e){
                            if(!_self.clickPrinting){return;};//正在绘制围栏
                            let path = polygon.getPath();
                            let poly = [];
                            for (var i = 0; i < path.length; i++) {
                                poly.push({lat:path[i].lan,lng:path[i].lng});
                            }
                            console.log(JSON.stringify(poly));
                        });
                        
                        _self.map.addOverlay(polygon);   //增加多边形
                    }
                    
//                  var marker = new BMap.Marker(new BMap.Point(child.core.lng, child.core.lan));
//                  marker.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
//                  _self.map.addOverlay(marker);
                    
                    let opts = {
                        position: new BMap.Point(child.core.lng, child.core.lan), // 指定文本标注所在的地理位置
                        offset: new BMap.Size(30, -30) // 设置文本偏移量
                    };
                    // 创建文本标注对象
                    let label = new BMap.Label(child.name, opts);
                    // 自定义文本标注样式
                    label.setStyle({color:'blue',borderRadius:'5px',borderColor:'#ccc',fontFamily:'微软雅黑'});
                    label.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
                    _self.map.addOverlay(label);
                    
                  }
                  
              })
              .catch(function (error) {
                  console.log(error);
              })
              .then(function () {
                  // always executed
              });
        },
        boundary:function(){
        	
        	let bdary = new BMap.Boundary();
            bdary.get("上海市普陀区", function(rs){ // 获取行政区域
            	//_self.map.clearOverlays(); // 清除地图覆盖物
                let count = rs.boundaries.length; // 行政区域的点有多少个
                if (count === 0) {
                    alert('未能获取当前输入行政区域');
                    return ;
                }
                let pointArray = [];
                for (let i = 0; i < count; i++) {
                	let ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                	_self.map.addOverlay(ply); // 添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                }
                _self.map.setViewport(pointArray); // 调整视野
                
                
                let poly = [];
                for (let i = 0; i < pointArray.length; i++) {
                    poly.push({lat:pointArray[i].lan,lng:pointArray[i].lng});
                }
                console.log(JSON.stringify(poly));
                
            });
        	
        }
        
        
    },
    mounted(){//初始方法
        _self=this;
        
        _self.initMap();//初始地图
    }
})
</script>


